<!-- components/AnimatedCard.vue -->
<template>
  <Transition
    :name="transitionName"
    @before-enter="onBeforeEnter"
    @enter="onEnter"
    @leave="onLeave"
  >
    <div v-if="visible" class="animated-card" :class="cardClass" @click="$emit('click')">
      <slot />
    </div>
  </Transition>
</template>
<script setup>
import { computed } from 'vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: true,
  },
  animation: {
    type: String,
    default: 'fade',
  },
  delay: {
    type: Number,
    default: 0,
  },
  duration: {
    type: Number,
    default: 300,
  },
  cardClass: {
    type: String,
    default: '',
  },
})

const emit = defineEmits(['click', 'before-enter', 'after-enter', 'before-leave', 'after-leave'])

const transitionName = computed(() => `card-${props.animation}`)

const onBeforeEnter = (el) => {
  if (props.delay > 0) {
    el.style.animationDelay = `${props.delay}ms`
  }
  emit('before-enter', el)
}

const onEnter = (el, done) => {
  el.style.animationDuration = `${props.duration}ms`
  el.addEventListener('animationend', done, { once: true })
  emit('after-enter', el)
}

const onLeave = (el, done) => {
  el.addEventListener('animationend', done, { once: true })
  emit('after-leave', el)
}
</script>
<style scoped>
.animated-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.animated-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 淡入淡出 */
.card-fade-enter-active {
  animation: fadeIn var(--duration, 0.3s) ease;
}

.card-fade-leave-active {
  animation: fadeOut var(--duration, 0.3s) ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* 滑动 */
.card-slide-enter-active {
  animation: slideIn var(--duration, 0.3s) ease;
}

.card-slide-leave-active {
  animation: slideOut var(--duration, 0.3s) ease;
}

@keyframes slideIn {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-30px);
    opacity: 0;
  }
}

/* 缩放 */
.card-scale-enter-active {
  animation: scaleIn var(--duration, 0.3s) ease;
}

.card-scale-leave-active {
  animation: scaleOut var(--duration, 0.3s) ease;
}

@keyframes scaleIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes scaleOut {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.8);
    opacity: 0;
  }
}
</style>
